<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    .outer {
        width: 400px;
        margin: 100px auto;
        text-align: center;
    }

    table {
        width: 400px;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    tr,
    td {
        border: 1px black solid;
        padding: 10px 0;
    }

    form div {
        margin: 10px 0;
    }
</style>

<body>
    <div class="outer">
        <table>
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>邮件</td>
                    <td>薪资</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>孙悟空</td>
                    <td>swk@hgs.com</td>
                    <td>10000</td>
                    <td><a href="javascript:;" id="td-a">删除</a></td>
                </tr>

                <tr>
                    <td>猪八戒</td>
                    <td>zbj@hgs.com</td>
                    <td>8000</td>
                    <td><a href="javascript:;" id="td-a">删除</a></td>
                </tr>
                <tr>
                    <td>沙和尚</td>
                    <td>shs@hgs.com</td>
                    <td>6000</td>
                    <td><a href="javascript:;" id="td-a">删除</a></td>
                </tr>
            </tbody>
        </table>
        <form action="#">
            <div>
                <label for="name">姓名</label>
                <input type="text" id="name" />
            </div>
            <div>
                <label for="name">邮件</label>
                <input type="email" id="email" />
            </div>
            <div>
                <label for="name">薪资 </label>
                <input type="number" id="salary" />
            </div>
            <button id="btn1" type="button">添加</button>
        </form>
    </div>
    <script>
        // 利用冒泡去捆绑事件，捆绑给超链接的按钮和添加
        // 直接绑定document的事件，然后添加if判断去捆绑
        // 获取元素             
        // 将其展开为数组，并且使用数组方法
        const outerform = document.querySelectorAll(".outer > form > div")
        const btn1 = document.getElementById("btn1")
        const tbody = document.querySelector("tbody")
        const tdA = document.querySelectorAll("td >a#td-a")
        console.log(tdA);
        let i = 0
        document.addEventListener("click", function (event) {
            if ([...tdA].includes(event.target)) {
                i++
                event.target.id = `${i}`;
                (function () {
                    const Ad = document.getElementById(`${i}`)
                    const td = Ad.parentNode.parentNode
                    const empName = td.firstElementChild.textContent
                    if (confirm("确认是否删除[" + empName + "]吗?")) {
                        td.remove()
                    }
                })()
                // 先获取当前超链接的父元素的父元素，去删除当前量




                // const empName = tr.firstElementChild.textContent
                // if (confirm("确认是否删除[" + empName + "]吗?")) {
                //     tr.remove()
                // }

            }
            if ([btn1].includes(event.target)) {
                (function () {
                    const name = document.getElementById("name").value
                    const email = document.getElementById("email").value
                    const salary = document.getElementById("salary").value
                    // 创建三个td元素,并且将文本内容设置为三个value属性
                    const nameTd = document.createElement("td")
                    const emailTd = document.createElement("td")
                    const salaryTd = document.createElement("td")
                    nameTd.textContent = name
                    emailTd.textContent = email
                    salaryTd.textContent = salary
                    tr.appendChild(nameTd)
                    tr.appendChild(emailTd)
                    tr.appendChild(salaryTd)
                    tr.insertAdjacentHTML("beforeend", '<td><a href="javascript:;" id="td-a">删除</a></td>')
                    tbody.appendChild(tr)
                })()
            }

        });






















































        /* const delemp = function () {
            console.log(tdis);
            const tr = tdis.parentNode.parentNode
            const empName = tr.firstElementChild.textContent
            if (confirm("确认是否删除[" + empName + "]吗?")) {
                tr.remove()
            }
        }
        for (let i = 0; i < trlinks.lengtd; i++) {
            trlinks[i].onclick = delemp

        }
        const outerform = document.querySelectorAll(".outer > form > div")
        console.log(outerform);
        const btn1 = document.getElementById("btn1")

        const tbody = document.querySelector("tbody")
        btn1.onclick = function () {
            const name = document.getElementById("name").value
            const email = document.getElementById("email").value
            const salary = document.getElementById("salary").value
            // 创建三个td元素,并且将文本内容设置为三个value属性
            const nameTd = document.createElement("td")
            const emailTd = document.createElement("td")
            const salaryTd = document.createElement("td")
            nameTd.textContent = name
            emailTd.textContent = email
            salaryTd.textContent = salary
            tr.appendChild(nameTd)
            tr.appendChild(emailTd)
            tr.appendChild(salaryTd)
            tr.insertAdjacentHTML("beforeend", '<td><a href="javascript:;" id="td-a">删除</a></td>')
            tbody.appendChild(tr)
        } */
    </script>
</body>

</html>